<template>
	<div id="app">
        <transition :name="transitionName">
		<router-view/>
        </transition>
		<FooterGuide v-if="isShow" v-show="$route.meta.showFooter"/>
	</div>
</template>

<script>
   
	import {mapActions}  from 'vuex'
	import FooterGuide from './components/FooterGuide/FooterGuide.vue'
	export default {
        data(){
            return {
                documentHeight: document.documentElement.clientHeight,
                showHeight: document.documentElement.clientHeight,
                isShow:true,
                transitionName:"",
            }
        },
		components: {
			FooterGuide
		},
        created() {
           // this.getSize()  
        },
		mounted(){
            this.getSize()
			this.getAddress()
			this.getUserInfo()
            // this.onResize()
		},
		methods:{
			 ...mapActions(['getAddress', 'getUserInfo']),
             getSize(){
                 let metaEl = document.createElement('meta');
                 let scale = window.outerWidth/375;
                 metaEl.setAttribute('name', 'viewport');
                 metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
                 document.documentElement.firstElementChild.appendChild(metaEl);
             },
             onResize(){
                 //ios
                        document.body.addEventListener("focusin", () => {
                          //软键盘弹出的事件处理
                           this.isShow = false
                        });
                        document.body.addEventListener("focusout", () => {
                          //软键盘收起的事件处理
                          this.isShow = true
                        });
             }
		},
       watch: {
       // 使用watch 监听$router的变化
       $route(to, from) {
         // 如果to索引大于from索引,判断为前进状态,反之则为后退状态
         if (to.meta.index == '0' || to.meta.index == '2' || to.meta.index == '37' || to.meta.index == '5' || to.meta.index == '13') {
           // 设置动画名称
           this.transitionName = "";
         } else if(to.meta.index > from.meta.index){
           this.transitionName = "slide-left";
         }else {
           this.transitionName = "slide-right";
         }
       },
     },

	}
</script>

<style lang="stylus" rel="stylesheet/stylus">
    #app
        width 100%
        height 100%
        background #f5f5f5
    .page
        padding-top 50px
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active 
      will-change transform
      transition all 500ms
      position absolute
    .slide-right-enter
      opacity 0
      transform translateX(-100%)
    .slide-right-leave-active 
      opacity 0
      transform translateX(100%)
     
    .slide-left-enter
      opacity 0
      transform translateX(100%)
     
    .slide-left-leave-active
      opacity 0
      transform translateX(-100%)
</style>